<template>
  <div class="home-top-container Top-width">
       <!-- 左侧图标和标题区域 -->
       <div class="left">
          <img class="logo" src="../../../assets/heima.png" alt="">
          <div>黑马后台管理系统</div>
       </div>
       <!-- 右侧按钮区域 -->
       <div class="right">
         <button type="button" class="btn btn-light" @click="logOut">退出登录</button>
       </div>
  </div>
</template>

<script>
export default {
  name:'HomeTop',
  methods:{
    // 退出登录
    logOut(){
        localStorage.removeItem('token')
        this.$router.push('/login')
    }
  }

}
</script>

<style lang="less" scoped>
    .Top-width{
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #efefef;
      .left{
        display: flex;
        justify-content: start;
        align-items: center;
        font-size: 20px;
      .logo{
        height: 60px;
        margin-right: 10px;
      }
      }
      .right{
        display: flex;
        font-size: 12px;
        align-items: center;
        margin-right: 20px;
      }
    }
</style>